<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物网页</title>
<style>
    /* 基本样式 */
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    header {
        background-color: #333;
        color: #fff;
        padding: 10px;
        text-align: center;
    }
    #products {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .product {
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px;
        padding: 10px;
        width: 200px;
    }
    button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 5px;
    }
    button:hover {
        background-color: #45a049;
    }
</style>
</head>
<body>
<header>
    <h1>欢迎来到购物网页</h1>
</header>

<div id="products">
    <div class="product">
        <h2>商品 1</h2>
        <img src="image_url_for_product1.jpg" alt="商品 1 图片">
        <p>描述商品 1</p>
        <p>价格：$10</p>
        <button class="add-to-cart" data-name="商品 1" data-price="10">加入购物车</button>
    </div>
    
    <div class="product">
        <h2>商品 2</h2>
        <p>描述商品 2</p>
        <p>价格：$20</p>
        <button class="add-to-cart" data-name="商品 2" data-price="20">加入购物车</button>
    </div>
    <!-- 在这里添加更多的商品 -->
    <div class="product">
        <h2>商品 3</h2>
        <p>描述商品 3</p>
        <p>价格：$15</p>
        <button class="add-to-cart" data-name="商品 3" data-price="15">加入购物车</button>
    </div>
    <div class="product">
        <h2>商品 4</h2>
        <p>描述商品 4</p>
        <p>价格：$25</p>
        <button class="add-to-cart" data-name="商品 4" data-price="25">加入购物车</button>
    </div>
</div>

<div id="cart">
    <h2>购物车</h2>
    <ul id="cart-items"></ul>
    <p id="total">总计：$0</p>
    <button id="checkout">结算</button>
</div>

<script src="script.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const productsContainer = document.getElementById('products');
        const cartItemsElement = document.getElementById('cart-items');
        const checkoutButton = document.getElementById('checkout');

        let cart = [];

        productsContainer.addEventListener('click', function(event) {
            if (event.target.classList.contains('add-to-cart')) {
                const name = event.target.dataset.name;
                const price = parseFloat(event.target.dataset.price);
                addToCart(name, price);
            }
        });

        checkoutButton.addEventListener('click', function() {
            checkout();
        });

        function addToCart(name, price) {
            cart.push({ name, price });
            updateCart();
        }

        function updateCart() {
            cartItemsElement.innerHTML = '';
            let total = 0;
            cart.forEach(item => {
                const li = document.createElement('li');
                li.textContent = `${item.name} - $${item.price.toFixed(2)}`;
                cartItemsElement.appendChild(li);
                total += item.price;
            });
            document.getElementById('total').textContent = `总计：$${total.toFixed(2)}`;
        }

        function checkout() {
            alert('感谢您的购买！您的总计是 $' + getTotal().toFixed(2));
            cart = [];
            updateCart();
        }

        function getTotal() {
            return cart.reduce((total, item) => total + item.price, 0);
        }
    });
</script>
</body>
</html>
